<template>
  <a-drawer
    title="对话历史详情"
    :visible="visible"
    :width="600"
    @close="onClose"
    :destroyOnClose="true"
    :keyboard="false"
    :maskClosable="true"
    :body-style="{ padding: '0', height: 'calc( 100% - 55px )' }"
  >
    <div class="list-wrap">
      <div v-if="list.length > 0" class="message-list beauty-scroller-bar">
        <div v-for="(item, index) of list" :key="index">
          <div class="message-right" v-if="item.role == 'user'">
            <div class="message-main">
              <div class="avatar-icon">
                <UserOutlined />
              </div>
              <div class="message-content">
                <div class="message-card">
                  <div
                    class="message-text message-markdown-wrap"
                    :style="{ maxWidth: TextMaxWith + 'px' }"
                    v-highlight
                    v-html="item.content"
                  ></div>
                </div>
              </div>
            </div>
          </div>
          <div class="message-left" v-if="item.role == 'assistant'">
            <div class="message-main">
              <img v-if="aiAvatar" :src="aiAvatar" alt="" class="avatar" />
              <div class="message-content">
                <div class="message-card">
                  <div
                    class="message-text message-markdown-wrap"
                    :style="{ maxWidth: TextMaxWith + 'px' }"
                  >
                    <span v-highlight v-html="item.content"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-drawer>
</template>

<script>
import { defineComponent, watch, computed, reactive, toRefs, toRaw } from "vue";
import { Form, message, TreeSelect } from "ant-design-vue";
import request from "../../../common/utils/request";
import store from "../../../store/index";
import utils from "../../../common/utils/utils";
import { UserOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  name: "EditUser",
  components: { UserOutlined },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    chatId: {
      type: [Number, String],
      default: 0,
    },
    TextMaxWith: {
      type: [Number, String],
      default: 300,
    },
    aiAvatar: {
      type: String,
      default: "",
    },
  },
  setup(props, context) {
    const state = reactive({
      list: [],
    });

    const onClose = () => {
      context.emit("onClose");
    };

    const getList = () => {
      request
        .get("/work_ai", "/user/team/app/chat/history", {
          chat_id: props.chatId,
        })
        .then((res) => {
          if (res.data) {
            state.list = res.data;
          }
        });
    };

    const init = () => {
      if (props.chatId) {
        getList();
      }
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          state.list = [];
          state.noData = false;
        }
      }
    );

    return {
      ...toRefs(state),
      onClose,
    };
  },
});
</script>

<style lang="less" scoped>
.list-wrap {
  width: 100%;
  height: 100%;

  background-color: #f5f5f5;

  .message-list {
    width: 100%;
    height: 100%;
    overflow: hidden auto;
    padding: 10px;

    .message-left {
      padding: 10px 0;

      .message-main {
        display: flex;

        .avatar {
          width: 40px;
          height: 40px;
          object-fit: cover;
          border-radius: 50%;
          margin-right: 10px;
        }

        .message-content {
          position: relative;
          padding-right: 40px;

          .message-card {
            background-color: #fff;
            padding: 10px 20px;
            border-radius: 8px;

            .message-text {
              .message-text-content {
                white-space: pre-wrap;
              }
            }
          }
        }
      }
    }

    .message-right {
      padding: 10px 0;

      .message-main {
        display: flex;
        flex-direction: row-reverse;

        .avatar-icon {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-color: @primary-color;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 10px;
          font-size: 22px;
        }

        .message-content {
          position: relative;
          padding-left: 40px;

          .message-card {
            background-color: #fff;
            padding: 10px 20px;
            border-radius: 8px;

            .message-text {
              white-space: pre-wrap;
            }
          }
        }
      }
    }
  }
}
</style>
